
<template>
  <div class="tranf">
    <img style="width: 50%" :src="imgUrl" />
    <div class="btns">
      <el-upload
        ref="uploadImg"
        action="#"
        :show-file-list="false"
        :before-upload="beforeRead"
        :http-request="upLoad"
      >
        <el-button type="primary" size="mini">重新上传图片</el-button>
      </el-upload>
      <el-button class="ml20" type="success" size="mini" @click="rotate">旋转</el-button>
      <!-- <span v-if="isSave" style="color: red"
        >(选择合适后请点击右侧保存按钮)</span
      > -->
      <el-button type="warning" size="mini" v-if="isSave" style="margin-left: 20px" @click="save">保存</el-button>
    </div>
  </div>
</template>
<script>
import fileUtils from "@/utils/fileUtils.js";
export default {
  name: "Trans",
  props: {
    imgSrc: String
  },
  data() {
    return {
      ctx: {},
      h1: 400,
      w1: 300,
      canvas: {},
      rota: 1,
      img: {},
      imgUrl: "",
      isSave: false
    };
  },
  created: function () {
    this.imgUrl = this.imgSrc;
    this.downloadCanvas();
  },
  methods: {
    beforeRead(file) {
      let that = this;
      return new Promise((resolve) => {
        fileUtils.getOrientation(file).then((orient) => {
          let reader = new FileReader();
          let img = new Image();
          reader.onload = (e) => {
            img.src = e.target.result;
            img.onload = function () {
              let width = 600,
                height = 600 * (img.height / img.width);
              const data = fileUtils.rotateImage(img, width, height, orient);
              const newFile = fileUtils.dataURLtoFile(data, file.name);
              resolve(that.upLoad(newFile));
            };
          };
          reader.readAsDataURL(file);
        });
      });
    },
    // 编辑添加图片
    async upLoad(param) {
      var imgup = "";
      await this.getBase64(param).then((res) => {
        imgup = res;
      });
      var paramd = {
        img: imgup
      };
      this.$api.imgAdd.addimgPer(paramd).then((res) => {
        if (res.code !== 0) return;
        this.imgUrl = this.global.baseUrlImage + "avatar/" + res.id;
        this.downloadCanvas();
        this.$emit("changeImg", res.id);
      });
    },
    //图片处理
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },

    rotate() {
      let that = this;

      switch (that.rota) {
        case 1: {
          that.canvas.height = that.w1;
          that.canvas.width = that.h1;
          that.ctx.transform(0, 1, -1, 0, that.canvas.width, 0);
          break;
        }
        case 2: {
          that.canvas.height = that.h1;
          that.canvas.width = that.w1;
          that.ctx.transform(-1, 0, 0, -1, that.canvas.width, that.canvas.height);
          break;
        }
        case 3: {
          that.canvas.height = that.w1;
          that.canvas.width = that.h1;
          that.ctx.transform(0, -1, 1, 0, 0, that.canvas.height);
          break;
        }
        default: {
          that.canvas.height = that.h1;
          that.canvas.width = that.w1;
          that.ctx.transform(1, 0, 0, 1, 0, 0);
          break;
        }
      }
      var img = this.img;
      this.ctx.drawImage(img, 0, 0);
      this.imgUrl = that.canvas.toDataURL("image/jpeg");
      that.rota++;
      if (that.rota > 4) {
        that.rota = 1;
      }
      that.isSave = true;
    },

    //确定保存 ，传值到父组件
    save() {
      // let data =this.canvas.toDataURL("image/jpeg");

      this.$emit("imgChange", this.imgUrl);
    },
    downloadCanvas() {
      let that = this;
      let imgs = new Image();
      imgs.setAttribute("crossOrigin", "anonymous");
      // that.imgUrl = imgs.src = that.imgSrc;
      imgs.src = that.imgUrl;
      imgs.onload = function () {
        that.w1 = imgs.width;
        that.h1 = imgs.height;
        that.canvas = document.createElement("canvas");
        that.ctx = that.canvas.getContext("2d");
        that.canvas.width = that.w1;
        that.canvas.height = that.h1;
        that.ctx.drawImage(imgs, 0, 0, that.w1, that.h1);
        that.rota = 1;
        that.img = imgs;
      };
    }
  }
};
</script>

<style>
.btns {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.tranf {
  text-align: center;
}
</style>